import React, { useState } from 'react'

/* 函数式组件 - 钩子函数 */
export default function App() {
  //函数式组件没有state用于配置状态变量
  let [num,setNum] = useState(100);//设置state,初始值为100
  let [uname,setUName] = useState("yaya")

  let f1 = ()=>{
    //修改state值的方法,需要修改数据 更新虚拟Dom 映射到真实Dom 重绘组件
    //整个过程非常耗时,所以被设计为了异步执行
    //因此,修改数据过后,再获取数据,得到的仍然是旧的数据
    //如果想要获取最新的值,需要使用setEffect钩子函数实现
    setUName("丫丫")
    console.log(uname)
  }//--合法
  //function f2(){}//--合法
  //f3(){}//--不合法,这种用法只能用于类中

  return (
    <div>
      <button onClick={()=>{setNum(num+1)}}>
        当前点击次数:{num}
      </button>     
      <button onClick={f1}>当前用户名:{uname}</button> 
    </div>
  )
}
